<template>
  <view class="svg-icon" :style="iconStyle">
    <!-- 调试信息 -->
    <text v-if="showDebug" class="debug-text">Name: {{name}}, Color: {{color}}</text>
            
            <!-- 返回箭头 -->
            <image 
              v-if="name === 'arrow-left'" 
              src="/static/icons/arrow-left.svg" 
              mode="aspectFit"
              :style="imageStyle"
              @error="onImageError"
              @load="onImageLoad"
            />
            
            <!-- 实心返回箭头（可变色） -->
            <image 
              v-else-if="name === 'arrow-left-solid'" 
              :src="getDynamicSvg('arrow-left-solid')" 
              mode="aspectFit"
              :style="{ width: '100%', height: '100%' }"
              @error="onImageError"
              @load="onImageLoad"
            />

            <!-- 实心返回箭头（白色） -->
            <image 
              v-else-if="name === 'arrow-left-solid-white'" 
              src="/static/icons/arrow-left-solid-white.svg" 
              mode="aspectFit"
              :style="imageStyle"
              @error="onImageError"
              @load="onImageLoad"
            />

            <!-- 首页图标 -->
            <image 
              v-else-if="name === 'home'" 
              src="/static/icons/home.svg" 
              mode="aspectFit"
              :style="imageStyle"
              @error="onImageError"
              @load="onImageLoad"
            />
    
    <!-- 未知图标 -->
    <text v-else class="unknown-icon">?</text>
  </view>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    // 图标名称或路径
    name: {
      type: String,
      required: true
    },
    // 图标大小
    size: {
      type: [String, Number],
      default: '32rpx'
    },
    // 图标颜色
    color: {
      type: String,
      default: 'currentColor'
    },
    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({})
    },
    // 是否显示调试信息
    showDebug: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 图标样式
    iconStyle() {
      const size = typeof this.size === 'number' ? this.size + 'rpx' : this.size
      return {
        width: size,
        height: size,
        ...this.customStyle
      }
    },
    
    // 图片样式（包含颜色滤镜）
    imageStyle() {
      return {
        width: '100%',
        height: '100%',
        filter: this.getColorFilter()
      }
    }
  },
  methods: {
    // 图片加载成功
    onImageLoad() {
      console.log('SvgIcon图片加载成功:', this.name)
    },
    
    // 生成可变色 SVG 的 data URI
    getDynamicSvg(name) {
      const color = typeof this.color === 'string' && this.color ? this.color : '#1B1B1B'
      if (name === 'arrow-left-solid') {
        const svg = `<svg t="1761990854737" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M209.459634 511.851755a103.934252 103.934252 0 0 1 33.744887-76.170355L693.291496 18.082605a70.166093 70.166093 0 0 1 94.020237 0 58.623014 58.623014 0 0 1 0 87.27126L349.186738 511.991389l438.101723 406.660797a58.623014 58.623014 0 0 1 0 87.27126 70.166093 70.166093 0 0 1-94.020237 0L243.344155 588.278106A104.329882 104.329882 0 0 1 209.459634 511.851755z" fill="${color}"></path></svg>`
        return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`
      }
      return ''
    },

    // 图片加载失败
    onImageError(e) {
      console.error('SvgIcon图片加载失败:', this.name, e)
    },
    
    // 获取颜色滤镜
    getColorFilter() {
      if (!this.color || this.color === 'currentColor') {
        return 'none'
      }
      
      // 将颜色转换为RGB值
      const rgb = this.hexToRgb(this.color)
      if (!rgb) {
        return 'none'
      }
      
      // 计算滤镜值
      const { r, g, b } = rgb
      const brightness = (r + g + b) / 765 // 0-1
      const contrast = 1
      const saturate = 1
      
      // 生成滤镜字符串
      return `brightness(${brightness}) contrast(${contrast}) saturate(${saturate}) hue-rotate(${this.getHueRotation(r, g, b)}deg)`
    },
    
    // 十六进制颜色转RGB
    hexToRgb(hex) {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null
    },
    
    // 计算色相旋转角度
    getHueRotation(r, g, b) {
      // 简化的色相计算
      const max = Math.max(r, g, b)
      const min = Math.min(r, g, b)
      const diff = max - min
      
      if (diff === 0) return 0
      
      let hue = 0
      if (max === r) {
        hue = ((g - b) / diff) % 6
      } else if (max === g) {
        hue = (b - r) / diff + 2
      } else {
        hue = (r - g) / diff + 4
      }
      
      return Math.round(hue * 60)
    }
  }
}
</script>

<style lang="scss" scoped>
.svg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  .debug-text {
    font-size: 20rpx;
    color: #ff0000;
    background-color: #ffff00;
    padding: 4rpx;
    border-radius: 4rpx;
  }
  
  .unknown-icon {
    font-size: 24rpx;
    color: #999;
    background-color: #f0f0f0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4rpx;
  }
}
</style>
